<template>
	<view class="search-user-container">
		<view>
			<uni-search-bar bgColor="#fff" :radius="100" placeholder="账号/手机号" @input="searchUser" @focus="sfocus"
				@blur="sblur"></uni-search-bar>
		</view>
		<view class="rqb">
			<view class="rqb1">我的地球号：199501110</view>
			<view class="rqb2" @click="iserweima = true">
				<image class="rqb2a" src="/static/image/icon/semw.png"></image>
			</view>
		</view>
		<view class="conversation-rq" v-if="isss">
			<div class="item">
				<image src="/static/image/icon/fjq.png" />
				<view class="rqa1">
					<text>快速建群</text>
					<text class="tips">快速与周边的人建立群聊</text>
				</view>
				<i class="icon-ion-ios-arrow-right"></i>
			</div>
			<div class="item">
				<image src="/static/image/icon/fjr.png" />
				<view class="rqa1">
					<text>附近的人</text>
					<text class="tips">增加身边的朋友</text>
				</view>
				<i class="icon-ion-ios-arrow-right"></i>
			</div>
			<div class="item">
				<image src="/static/image/icon/sjlxr.png" />
				<view class="rqa1">
					<text>手机联系人</text>
					<text class="tips">增加或邀请通讯录中的朋友</text>
				</view>
				<i class="icon-ion-ios-arrow-right"></i>
			</div>
			<div class="item" @click="isyqhy=true">
				<image src="/static/image/icon/yqhy.png" />
				<view class="rqa1">
					<text>邀请好友</text>
					<text class="tips">邀请好友获得更多的朋友</text>
				</view>
				<i class="icon-ion-ios-arrow-right"></i>
			</div>
		</view>
		<view v-if="users && users?.length">
			<text class="category">搜索结果</text>
			<UserListView class="result" :enable-pick="false" :users="users" :show-category-label="false"
				:padding-left="'10px'" />
		</view>
		<view class="rqd" v-if="keyword !='' && users?.length==0">
			<image class="rqdimg" src="/static/image/icon/nullss.png"></image>
			<view class="rqda">
				很遗憾该用户不存在
			</view>
			<view class="rqdb">
				尝试输入另一个相关的关键字
			</view>
		</view>

		<view class="rq-ds" v-if="isyqhy">
			<view class="dsa">
				<view class="dsa1">邀请好友</view>
				<view class="dsa2"></view>
			</view>
			<view class="dsb">
				<view class="dsba">
					<view class="dsba1">
						<image class="dsba1a" src="/static/image/icon/wx.png"></image>
						<view class="dsba1d">微信</view>
					</view>
					<view class="dsba1">
						<image class="dsba1a" src="/static/image/icon/pyq.png"></image>
						<view class="dsba1d">朋友圈</view>
					</view>
					<view class="dsba1">
						<image class="dsba1a" src="/static/image/icon/lj.png"></image>
						<view class="dsba1d">复制链接</view>
					</view>
				</view>
			</view>
			<view class="dsc">
				<view class="icon-ion-ios-close-empty tca4a" @click="isyqhy = false"></view>
			</view>
		</view>

		<view class="rq-tc" v-if="iserweima">
			<view class="tz"  @click="iserweima = false"></view>
			<view class="tc">
				<view class="tca" @click="iserweima = false"></view>
				<view class="tcb">
					<view class="tcb1">我的二维码</view>
					<image class="tcb2" src="/static/image/icon/anniu1.png" @click="onshare"></image>
				</view>
				<view class="tcc">
					<image class="tcc1" src="/static/image/icon/150px.png"></image>
				</view>
				<view class="tcd">幼稚鬼</view>
				<view class="tce">江苏 徐州</view>
				<view class="tcf">
					<image class="tcf1" src="/static/image/icon/xemw.png"></image>
				</view>
				<view class="tcg">扫一扫上面的二维码图案，加我地球岛</view>
				<view class="tch">保存到手机</view>
			</view>
		</view>

	</view>
</template> 

<script>
	import UserListView from "../user/UserListView.vue";
	import wfc from "../../wfc/client/wfc";
	import SearchType from "../../wfc/model/searchType";
	import store from "../../store";
	export default {
		name: "SearchUserPage",
		components: {
			UserListView
		},
		data() {
			return {
				keyword: '',
				users: [],
				isss: true,
				isyqhy: false,
				iserweima: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#F5F5F5',
			})
		},
		methods: {
			onshare() {
				//shareContent
				
				store.shareContent()
			},
			sblur() {
				if (this.keyword == '') {
					this.isss = true
					this.users = [];
				}
			},
			sfocus() {
				this.isss = false
			},
			searchUser(e) {
				this.keyword = e
				if (this.keyword === '') {
					this.users = [];
					return;
				}
				console.log('search user', this.keyword);
				wfc.searchUser(this.keyword, SearchType.General, 0, (keyword, users) => {
					console.log('searchUser success', keyword, users)
					this.users = users;
				}, err => {
					console.log(' searchUser err', err)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

	.rqd {
		width: 100%;
		margin-top: 120px;
		text-align: center;
	}

	.rqd .rqda {
		color: #000;
		text-align: center;
		font-family: MiSans;
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		line-height: 28px;
		margin-top: 15px;
	}

	.rqd .rqdb {
		color: #999;
		text-align: center;
		font-family: MiSans;
		font-size: 14px;
		font-style: normal;
		font-weight: 330;
		line-height: 22px;
		margin-top: 10px;
	}

	.rqdimg {
		width: 117px;
		height: 120px;
		text-align: center;
		margin: 0 auto;
	}

	.rqb {
		display: flex;
		color: #000;
		font-family: MiSans;
		font-size: 14px;
		justify-content: center;
		margin: 10px auto;

		.rqb1 {
			margin-right: 16px;
		}

		.rqb2a {
			width: 21px;
			height: 21px;
		}
	}

	.rq-ds {
		position: fixed;
		width: 100%;
		height: 245px;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 20px 20px 0px 0px;
		padding: 36px 25px;

		.dsc {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 10px;
			top: 10px;
			font-size: 28px;
		}

		.dsb {
			padding: 25px 10px 10px;

			.dsba {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.dsba1 {
					width: 33%;
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-bottom: 10px;

					.dsba1a {
						width: 56px;
						height: 56px;
						border-radius: 10px;
						margin-bottom: 10px;
					}

					.dsba1d {
						width: 56px;
						height: 24px;
						text-align: center;
						line-height: 24px;
						color: #4B4B4B;
						font-family: MiSans;
						font-size: 12px;

					}

				}
			}
		}

		.dsa {
			height: 32px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.dsa1 {
				color: #000;
				font-family: MiSans;
				font-size: 18px;
			}
		}
	}

	.search-user-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F5F5F5;
	}

	.input {
		height: 40px;
		padding: 0 10px;
		width: 100%;
		border-bottom: 1px solid lightgrey;
	}

	.category {
		padding: 5px 10px;
	}

	.result {
		min-height: 0;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tip {
		padding-top: 40px;
		text-align: center;
	}

	.item {
		padding: 10px 10px;
		margin: 0px 0;
		display: flex;
		align-items: center;
	}

	.rqa1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.item image {
		max-width: 38px;
		max-height: 38px;
		margin-right: 16px;
	}

	.item text {
		flex: 1;
	}

	.item text.tips {
		color: #999;
		font-family: MiSans;
		font-size: 12px;
	}

	.item i {
		color: #000000;
	}

	.item:active {
		background: #d6d6d6;
	}
</style>